<div class="content clearfix scroll-container" Soffset="6">
  <div class="top-buttons" style="left:41px" ng-controller="TaskDetailController">
    <!-- <div class="btn-group pull-right">
      <div class="btn-toolbar pull-right">
        <button title="关闭窗口" class="btn btn-inverse" ng-click="closeModelWindow()">
          <i class="toolbar-button ng-scope glyphicon glyphicon-remove" data-toggle="tooltip" title="关闭窗口"></i>
        </button>
      </div>
    </div> -->
    <button class="btn btn-default" ng-click="openApprovalModal('stop')" ng-if="rev==1">
      {{ 'FORM.DEFAULT-OUTCOME.STOP' | translate }}
    </button>
    <button class="btn btn-default" ng-click="openApprovalModal('hangUp')" ng-if="rev==1 && suspensionState==1">
      {{ 'FORM.DEFAULT-OUTCOME.HANG-UP' | translate }}
    </button>
    <button class="btn btn-default" ng-click="openApprovalModal('activation')" ng-if="rev==1 && suspensionState==2">
      {{ 'FORM.DEFAULT-OUTCOME.ACTIVATION' | translate }}
    </button>
    <button
      id="form_show_chart_button"
      class="btn btn-default"
      ng-click="showFlowChart()"
      translate="FORM.ACTION.FLOW-CHART"
    ></button>
    <button
      id="form_show_history_button"
      class="btn btn-default"
      ng-click="showApproveHistory()"
      translate="FORM.ACTION.APPROVE-HISTORY"
    ></button>
    <button
      id="form_show_history_button"
      class="btn btn-default"
      ng-click="goToSteps()"
      translate="FORM.ACTION.PREFETCH"
    ></button>
  </div>
  <div class="instance-main">
    <h4>{{processInstance.name}}-{{processInstance.id}}</h4>
    <table class="instance-detail">
      <tr>
        <td>{{'INSTANCE.DETAIL-TABLE.INSTANCE-ID' | translate}}:</td>
        <td>{{processInstance.id}}</td>
        <td>{{'INSTANCE.DETAIL-TABLE.DESCRIPTION' | translate}}</td>
        <td>{{processInstance.processDefinitionDescription}}</td>
      </tr>
      <tr>
        <td>{{'INSTANCE.DETAIL-TABLE.NAME' | translate}}:</td>
        <td>{{processInstance.name}}</td>
        <td>{{'INSTANCE.DETAIL-TABLE.STARTER-ID' | translate}}</td>
        <td>{{processInstance.startUserId}}</td>
      </tr>
      <tr>
        <td>{{'INSTANCE.DETAIL-TABLE.STATUS' | translate}}</td>
        <td>{{processInstance.status}}</td>
        <td>{{'INSTANCE.DETAIL-TABLE.STARTER-NAME' | translate}}</td>
        <td>{{processInstance.startUserName}}</td>
      </tr>
      <tr>
        <td>{{'INSTANCE.DETAIL-TABLE.ACTIVITY-ID' | translate}}</td>
        <td>{{processInstance.startActivityId}}</td>
        <td>{{'INSTANCE.DETAIL-TABLE.SUPERINSTANCE' | translate}}</td>
        <td>{{processInstance.superProcessInstanceId}}</td>
      </tr>
      <tr>
        <td>{{'INSTANCE.DETAIL-TABLE.TENANT' | translate}}</td>
        <td>{{processInstance.tenantId}}</td>
      </tr>
    </table>

    <hr />
    <table class="instance-detail">
      <tbody>
        <tr>
          <td>{{'INSTANCE.DETAIL-TABLE.END-TIME' | translate}}:</td>
          <td>{{processInstance.endTime | date:'yyyy-MM-dd HH:mm:ss'}}</td>
          <td>{{'INSTANCE.DETAIL-TABLE.DURATION' | translate}}</td>
          <td>{{processInstance.durationInMillis | duration}}</td>
        </tr>
        <tr>
          <td>{{'INSTANCE.DETAIL-TABLE.DELETE-REASON' | translate}}</td>
          <td>{{processInstance.deleteReason}}</td>
          <td>{{'INSTANCE.DETAIL-TABLE.END-ACTIVITY' | translate}}</td>
          <td>{{processInstance.endActivityId}}</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="instance-main setMar">
    <div class="instance-tabs" tab-control="instanceTabs" active-tab="instanceTask.activeTab"></div>
    <p ng-show="instanceTask.activeTab == 'task'">{{'INSTANCE.TASK-NUM' | translate:instanceTabs[0]}}</p>
    <table class="table table-hover" ng-show="instanceTask.activeTab == 'task'">
      <tr>
        <th>{{'INSTANCE.DETAIL-TABLE.TASKID' | translate}}</th>
        <th style="min-width: 90px;">{{'INSTANCE.DETAIL-TABLE.TASK-NAME' | translate}}</th>
        <th style="min-width: 80px;">{{'INSTANCE.DETAIL-TABLE.ASSIGNEE-ID' | translate}}</th>
        <th style="min-width: 90px;">{{'INSTANCE.DETAIL-TABLE.ASSIGNEE-NAME' | translate}}</th>
        <th>Owner</th>
        <th style="min-width: 94px;">{{'INSTANCE.DETAIL-TABLE.START-TIME' | translate}}</th>
        <th style="min-width: 94px;">{{'INSTANCE.DETAIL-TABLE.END-TIME' | translate}}</th>
        <th ng-if="tasksList.length > 1 && rev == 1" style="min-width: 50px;">
          {{'INSTANCE.DETAIL-TABLE.OPERATION' | translate}}
        </th>
      </tr>
      <tr ng-repeat="task in tasksList | orderBy:'startTime':true">
        <td ng-click="goToDetail(task)"><a>{{task.id}}</a></td>
        <td>{{task.name}}</td>
        <td ng-bind-html="task.assignee | foldString"></td>
        <td>{{task.assigneeName}}</td>
        <td>{{task.owner}}</td>
        <td>{{task.startTime | date:'yyyy-MM-dd HH:mm:ss'}}</td>
        <td>{{task.endTime | date:'yyyy-MM-dd HH:mm:ss'}}</td>
        <td ng-if="tasksList.length > 1 && rev == 1">
          <button
            ng-if="task.canAddDelExecution"
            type="button"
            class="btn btn-primary btn-xs"
            ng-click="openAddDelExecution($event,task)"
          >
            {{ 'INSTANCE.DETAIL-TABLE.ADD-EXECUTION' | translate }}
          </button>
          <button
            ng-if="task.canAddDelExecution"
            type="button"
            class="btn btn-success btn-xs"
            ng-click="openConfirmPop($event,task)"
          >
            {{ 'INSTANCE.DETAIL-TABLE.DEL-EXECUTION' | translate }}
          </button>
        </td>
      </tr>
    </table>

    <p ng-show="instanceTask.activeTab == 'param'">{{'INSTANCE.PARAM-NUM' | translate:instanceTabs[1]}}</p>
    <table class="table table-hover" ng-show="instanceTask.activeTab == 'param'">
      <tr>
        <th>{{'INSTANCE.DETAIL-TABLE.PARAM-NAME' | translate}}</th>
        <th>{{'INSTANCE.DETAIL-TABLE.TYPE' | translate}}</th>
        <th>{{'INSTANCE.DETAIL-TABLE.VALUE' | translate}}</th>
      </tr>
      <tr ng-repeat="item in formVariables">
        <td>{{item.variable.name}}</td>
        <td>{{item.variable.type}}</td>
        <td>{{item.variable.value}}</td>
      </tr>
    </table>
  </div>
</div>
